<template>
    <div>
        <el-row>
            <ul>
                <li><el-link :underline="false">登录</el-link></li>
                <li><el-link :underline="false">注册</el-link></li>
                <li><el-link :underline="false" href="/personceter">个人中心</el-link></li>
                <li><el-link :underline="false">注销</el-link></li>
            </ul>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-link :underline="false" href="/">
                    <el-image style="width: 200px; height: 100px;" :src="require('../assets/image/logo.jpg')" fit="contain" />
                </el-link>
            </el-col>
            <el-col :span="8">
                <el-input class="w-50 m-2" style="margin-top: 30px;" size="large" placeholder="商品搜索" suffix-icon="Search" />
            </el-col>
            <el-col :span="8">
                <div class="service-item">
                    <a id="header-chat" href="javaScript:void(0);">                                                         
                        <span class="icon icon-headset"><el-icon><Service /></el-icon></span>
                        <span class="service-item-info">在线客服</span>
                    </a>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="18" style="margin: auto;">
                <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" router>
                    <el-menu-item index="/">首页</el-menu-item>
                    <el-menu-item style="margin-left: 30px;" index="/loveflower">爱情鲜花</el-menu-item>
                    <el-menu-item style="margin-left: 30px;" index="/birthdayflower">生日鲜花</el-menu-item>
                    <el-menu-item style="margin-left: 30px;" index="/friendflower">友情鲜花</el-menu-item>
                    <el-menu-item style="margin-left: 30px;" index="/weddingflower">婚庆鲜花</el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default ({

});
</script>

<style lang="scss">
ul {
    list-style: none;//去掉黑色点点
    padding-left: 80%;//左面留白百分之80
}
li {
    float: left;//文字左飘
    margin-left: 20px;//间隔20个像素
}
.service-item {//在线客服的那个部分
    display: inline-block;//定义元素类型
    font-size: 14px;//设置字体的大小 
    color: #71797f;//颜色
    vertical-align: top;//实现顶部对齐
    line-height: 47px;//行高
    margin-top: 25px;//上外边距
    margin-left: -200px;//左外边距
    a {
        text-decoration: none;//下划线
        color: inherit;
    }
    .icon-headset {
        //background-position: -34px -102px;//背景图片位置
        width: 24px;//宽
        height: 24px;//高
        margin-top: 3px;//上外边距
        margin-left: 8px;//左外边距
        display: inline-block;//定义元素类型
        //background-image: url(//localhost:8080/images/common_sprite.png);//图片路径 在线客服显示图标
        background-repeat: no-repeat;//平铺
        vertical-align: top;//实现顶部对其

    }
}
.el-menu-header {
    margin-left: 30% !important;
    border-bottom: 0px !important;//下边框样式
    .el-menu-item {
        widows: 170px !important;
    }
}
</style>